<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
  .carousel {
    display: flex;
    overflow: hidden;
    width: 400px;
    height: 300px;
    margin: 0 auto;
  }

  .slide {
    flex: 0 0 auto;
    width: 100%;
    transition: transform 0.5s ease;
  }
  button{
    margin: 0px auto;
  }
</style>
</head>
<body>
<div class="carousel">
  <div class="slide"><button onclick="gb()">下一张</button>
    <img class="img" src="../static/images/鸡.png" alt="Image 1">
    
</div>

</div>

<script>
  const img = document.querySelectorAll('.img')[0];
  var imglist = ['鸡','你','太','美'];
  console.log(img.src);
  let i = 0;
  function gb(){
    if(i<4){
       img.src = 'http://172.16.53.166/static/images/'+imglist[i]+'.png';
    i+=1; 
    }else{
        i=0;
        img.src = 'http://172.16.53.166/static/images/'+imglist[i]+'.png';
    }
    
    
  }

</script>
</body>
</html>
